<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="wap-font-scale" content="no"/>
    <meta name="viewport" content="user-scalable=no, width=device-width"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>addStudent</title>
    <meta name="description"
          content="AXUI前端框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。AXUI前端框架原则是能用css写的不用js；能用js写的不用插件；能用插件的不重复引用插件。核心文件只有ax.css和ax.js，加载速度飞快。">
    <meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师,">
    <link th:href="@{/css/ax-lss.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/ax.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/ax-response.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>


    <script>
        //利用ajax发送请求，验证学号是否重复
        function checking1() {
            let id1 = document.getElementById("id1");
            let check = document.getElementById("checkSpan");
            $.ajax({
                url: "http://localhost:8080/checking",
                type: "GET",
                data: {
                    id: id1.value
                },
                success: function (data) {
                    if (data === 1) {
                        check.innerText = "学号正确";
                        check.style.color = 'green';
                    } else {
                        check.innerText = "学号已经存在";
                        check.style.color = 'red';
                    }
                }
            })
        }

    </script>

</head>
<body>

<canvas></canvas>


<form method="post" th:action="@{/addStudent}">

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">学号：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="id" id="id1" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入学生学号"
                           type="text" onblur="checking1()" required>
                </div>
            </div>
            <div class="ax-form-txt ax-color-danger"><span id="checkSpan"></span></div>
        </div>
    </div>

    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">姓名：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="name" placeholder="请输入姓名" type="text"
                           onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" required>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">年龄：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="age" placeholder="请输入年龄" type="number" min="1" max="100" required>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">性别：</div>
            <div class="ax-flex-block">
                <div class="ax-row">
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender" value="男" type="radio" checked><span>男</span>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender" value="女" type="radio"><span>女</span>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender1" type="hidden" hidden>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender1" type="hidden">
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">政治面貌：</div>
            <div class="ax-flex-block">
                <div class="ax-row">
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="political" value="共青团员" type="radio" checked><span>共青团员</span>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="political" value="群众" type="radio"><span>群众</span>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender1" type="hidden" hidden>
                        </label>
                    </div>
                    <div class="ax-col ax-col-6">
                        <label class="ax-radio">
                            <input name="gender1" type="hidden">
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">家庭地址：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <select name="address">
                        <option value="北京">北京</option>
                        <option value="海南">海南</option>
                        <option value="上海">上海</option>
                        <option value="江西">江西</option>
                        <option value="江苏">江苏</option>
                        <option value="浙江">浙江</option>
                        <option value="广东">广东</option>
                        <option value="黑龙江">黑龙江</option>
                        <option value="湖北">湖北</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-break-md"></div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">电话号码：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="number" placeholder="请输入电话号码" oninput="value=value.replace(/[^\d]/g,'')" type="text"
                           maxlength="11" required>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-break-md"></div>


    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label"></div>
            <div class="ax-flex-block">
                <div class="ax-form-input">
                    <button type="submit" class="ax-btn ax-primary ax-full">提交</button>
                </div>
            </div>
        </div>
    </div>


</form>


</body>